<template>
  <TmCell style="margin-bottom: 24rpx;" :round="4" :avatar-round="2" :avatar-size="100" show-avatar
    :avatar="likePlayItem?.coverImgUrl" :key="likePlayItem?.id" :title="likePlayItem?.name"
    :label="`${likePlayItem?.trackCount}首`" />
  <view style="display: flex;align-items: center;justify-content: center;">
    <TmTabs align="around" :transparent="true" :list="tabList" default-name="1" itemModel="line" activeColor="primary"
      activeFontColor="primary" :width="tabsWidth" :height="200" color="#F5F5F5" @change="onChange" />
  </view>
  <TmSheet>
    <template v-if="active === '1'">
      <TmCell :padding="[0, 24]" :avatar-round="2" :avatar-size="100" show-avatar :avatar="play.coverImgUrl"
        v-for="play in playList.created" :key="play.id" :title="play.name" :label="`${play.trackCount}首`"
        @click="onDetail(play.id)" />
    </template>
    <template v-else>
      <TmCell :padding="[0, 24]" :avatar-round="2" :avatar-size="100" show-avatar :avatar="play.coverImgUrl"
        v-for="play in playList.collect" :key="play.id" :title="play.name" :label="`${play.trackCount}首`"
        @click="onDetail(play.id)" />
    </template>
  </TmSheet>
  <!-- <TmSheet :round="4" :padding="[12, 12]">
    <TmScrolly :refresher="true" :bottomFresh="false" :height="screenHeight * 0.90">

    </TmScrolly>
  </TmSheet> -->
</template>
<script setup lang='ts'>
import type { PlayItem } from "@/types/song";
import TmTabs from "@/tmui/components/tm-tabs/tm-tabs.vue"
import TmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue";
import TmCell from "@/tmui/components/tm-cell/tm-cell.vue";
import TmScrolly from "@/tmui/components/tm-scrolly/tm-scrolly.vue";
import { systemStore, userStore } from "@/stores";
import { getUserPlaylist } from "@/api/song"

const user = userStore()
const system = systemStore()
const active = ref<string>('1')
const likePlayItem = ref<PlayItem | null>(null)
const playList = ref({
  collect: <PlayItem[]>[],
  created: <PlayItem[]>[],
})
const systemInfo = computed(() => system.systemInfo)
const tabsWidth = computed(() => (systemInfo.value?.screenWidth ?? 0) * 1.60)
const screenHeight = computed(() => (systemInfo.value?.screenHeight ?? 0 - 90))
const tabList: Tmui.tabs[] = [{ key: "1", title: "创建歌单" }, { key: "2", title: "收藏歌单" }]

const onInit = async () => {
  try {
    const { code, playlist } = await getUserPlaylist(user.userInfo.userId)
    if (code === 200) {
      likePlayItem.value = playlist[0]
      playlist.slice(1).forEach((item) => {
        if (item.creator.userId === user.userInfo.userId) {
          playList.value.created.push(item)
        } else {
          playList.value.collect.push(item)
        }
      })
      // playList.value = playlist
    }
  } finally {
  }
}
onInit()

const onDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/songList/index?id=${id}`
  })
}

const onChange = (key: string) => {
  active.value = key
}

</script>
<style lang='scss' scoped></style>